<template>
<card class="task-con booking-lis-con">
    <p slot="title">预约列表</p>
    <span slot="extra" @click.prevent="close">
        <Icon type="close-round" color="#495060"></Icon>
    </span>
    
    <Table  size="small" height="200" :columns="columns1" :data="appointData"></Table>
</card>
</template>
<style scoped>
    .task-con {
        width: 400px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -150px;
        z-index: 20000;
        text-align: left;
        -webkit-box-shadow: 0 0 10px 1px;
        box-shadow: 0 0 10px 1px;
        overflow: auto;
    }
    
    .ivu-card:hover {
        box-shadow: 0 0 10px 1px;
    }
    
    .actived {
        background: red;
    }
</style>
<style>
    td.alink {
        color: #2d8cf0;
        cursor: pointer;
    }
</style>
<script>
    import {
        mapGetters
    } from 'vuex'
    import appointService from 'service/appointService.js'
    //import userService from 'service/userService.js'
    export default {
        name: 'bookingList',
        props: {
            loginUserId: [String, Number],
            remove: Function,
            appointId: [String, Number],
            setAppointRecallNo: Function
        },
        data() {
            // let vm = this
            // console.log(vm);
            return {

                columns1: [{
                    title: '预约时间',
                    key: 'appointTime',
                    render: (h, params) => {
                        let curStyle = ''

                        if (params.row.id == this.appointId) {
                            curStyle = {
                                color: 'red'
                            }
                        } else {
                            curStyle = {
                                color: '#495060'
                            }
                        }
                        return h('div', {
                            style: curStyle
                        }, params.row.appointTime)

                    }
                }, {
                    title: '操作',
                    key: 'action',
                    width: 80,
                    render: (h, params) => {
                        let curStyle = ''
                        if (params.row.id == this.appointId) {
                            curStyle = {
                                color: 'red'
                            }
                        } else {
                            curStyle = {
                                color: '#495060'
                            }
                        }
                        return h('div', [
                            h('a', {
                                style: curStyle,
                                on: {
                                    click: () => {

                                        if (params.row.stuId) {
                                            let paramsdata = {
                                                'stuId': params.row.stuId,
                                                'stuName': params.row.stuName ? params.row.stuName : '',
                                                'telNo': params.row.telNo,
                                                'appointId': params.row.id
                                            }
                                            this.setAppointRecallNo(paramsdata)
                                        }

                                        this.deleteAppoint(params.row.id)
                                        this.remove()
                                    }
                                }
                            }, '查看')
                        ]);
                    }
                }, {
                    title: '处理',
                    key: 'note',
                    width: 100,
                    render: (h, params) => {
                        let curStyle = ''
                        if (params.row.id == this.appointId) {
                            curStyle = {
                                color: 'red'
                            }
                        } else {
                            curStyle = {
                                color: '#495060'
                            }
                        }
                        return h('div', [
                            h('Tooltip', {
                                style: curStyle,
                                props: {
                                    content: params.row.content,
                                    placement: 'top'
                                }
                            }, '批注')
                        ]);
                    }
                }],
                appointData: []
            }
        },
        // watch: {
        //     loginUserId(newVal) {
        //         this.getAppointList(newVal)
        //     }
        // },
        created() {
            this.getAppointList(this.loginUserId)
                //userService.getLoginUserInfo()

        },
        methods: {
            async getAppointList(userId) {
                let jsondata = await appointService.getAppointList({
                    'userId': userId
                })
                let listData = []
                if (jsondata.state) {
                    listData = jsondata.data
                    listData.map((item, index) => {
                        item.action = '查看'
                        item.note = '批注'
                    })

                }
                this.appointData = listData

            },
            close() {
                this.remove()
            },
            async repeatOnce() {
                let jsondata = await appointService.repeatOnce({
                    "id": this.appointId
                })
                console.log(jsondata)
            },
            async deleteAppoint(appointId) {
                let jsondata = await appointService.deleteAppoint({
                    "id": appointId
                })
                eventBus.$emit('refreshAppointCount')
            }
        }
    }
</script>